<template>
	<view>
		<uni-nav-bar statusBar :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<image class="logo" src="/static/common/logo.png" mode=""></image>
					<view class="navTitle">
						瑞富金
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<image src="https://tongling-data.oss-cn-beijing.aliyuncs.com/2025/10/29/59894b0d445c40e6b173df6955fc901c/head.png" mode="widthFix" style="width: 100%;margin-top: -180rpx;"></image>
		<view class="" style="margin-top: -400rpx; position: absolute;">
			<view class="time">
				2025-09-24 14:27:25
			</view>
			<view class="status flex-column-center">
				开盘中
			</view>
			<view class="newView flex-row-flex-start">
				<image class="new" src="/static/index/new.png" mode=""></image>
				<view class="newTitle">
					正常当天回款
				</view>
			</view>
			
		</view>
		<view class="itemView">
			<view class="itemView1">
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<image class="hang" src="/static/index/hang.png" mode=""></image>
					<view class="title">
						市场行情
					</view>
				</view>
				<view class="flex-row-flex-start">
					<view class="topTitle">
						商品
					</view>
					<view class="topTitle">
						回购
					</view>
					<view class="topTitle">
						销售
					</view>
					<view class="topTitle">
						高/低
					</view>
				</view>
				
			</view>
			<view v-for="(item,index) in 5" :key="index">
				<view class="item1 flex-row-flex-start" >
					<view class="topTitle1">
						黄金
					</view>
					<view class="topTitle1" style="color: #E52B3B;">
						852.39
					</view>
					<view class="topTitle1" style="color: #E52B3B;">
						853.69
					</view>
					<view class="flex-column-center" style="text-align: center;width: 25%;">
						<view class="topTitle1" style="color: #E52B3B;width: 100%;">
							<text>855.14</text>
							
						</view>
						<view class="topTitle1" style="color: #E52B3B;width: 100%;">
							<text>855.14</text>
							
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="itemView2">
			<view class="itemView1">
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<image class="hang" src="/static/index/hang.png" mode=""></image>
					<view class="title">
						旧料回收
					</view>
				</view>
			<!-- 	<view class="flex-row-flex-start">
					<view class="topTitle">
						商品
					</view>
					<view class="topTitle">
						回购
					</view>
					<view class="topTitle">
						销售
					</view>
					<view class="topTitle">
						高/低
					</view>
				</view> -->
				
			</view>
			<view class="" style="margin-top: -100rpx;">
				<view v-for="(item,index) in 5" :key="index" >
					<view class="item1 flex-row-flex-start" >
						<view class="topTitle1" style="width: 30%;">
							黄金金条999
						</view>
						<view class="topTitle1" style="color: #E52B3B;width: 20%;">
							852.39
						</view>
						<view class="topTitle1"  style="width: 30%;">
							白银首饰999
						</view>
						<view class="topTitle1" style="color: #E52B3B;width: 20%;">
							852.39
						</view>
						
					</view>
				</view>
			</view>
			
		</view>

		<view class="itemView2">
			<view class="itemView1">
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<image class="hang" src="/static/index/hang.png" mode=""></image>
					<view class="title">
						上交所报价
					</view>
				</view>
				<view class="flex-row-flex-start">
					<view class="topTitle">
						商品
					</view>
					<view class="topTitle">
						回购
					</view>
					<view class="topTitle">
						销售
					</view>
					<view class="topTitle">
						高/低
					</view>
				</view>
				
			</view>
			<view v-for="(item,index) in 5" :key="index">
				<view class="item1 flex-row-flex-start" >
					<view class="topTitle1">
						黄金
					</view>
					<view class="topTitle1" style="color: #E52B3B;">
						852.39
					</view>
					<view class="topTitle1" style="color: #E52B3B;">
						853.69
					</view>
					<view class="flex-column-center" style="text-align: center;width: 25%;">
						<view class="topTitle1" style="color: #E52B3B;width: 100%;">
							<text>855.14</text>
							
						</view>
						<view class="topTitle1" style="color: #E52B3B;width: 100%;">
							<text>855.14</text>
							
						</view>
					</view>
					
				</view>
			</view>
		</view>
			<view class="itemView2">
				<view class="itemView1">
					<view class="flex-row-flex-start" style="margin-top: 20rpx;">
						<image class="hang" src="/static/index/hang.png" mode=""></image>
						<view class="title">
							国际现货
						</view>
					</view>
					<view class="flex-row-flex-start">
						<view class="topTitle">
							商品
						</view>
						<view class="topTitle">
							回购
						</view>
						<view class="topTitle">
							销售
						</view>
						<view class="topTitle">
							高/低
						</view>
					</view>
					
				</view>
				<view v-for="(item,index) in 5" :key="index">
					<view class="item1 flex-row-flex-start" >
						<view class="topTitle1">
							黄金
						</view>
						<view class="topTitle1" style="color: #E52B3B;">
							852.39
						</view>
						<view class="topTitle1" style="color: #E52B3B;">
							853.69
						</view>
						<view class="flex-column-center" style="text-align: center;width: 25%;">
							<view class="topTitle1" style="color: #E52B3B;width: 100%;">
								<text>855.14</text>
								
							</view>
							<view class="topTitle1" style="color: #E52B3B;width: 100%;">
								<text>855.14</text>
								
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="bottomTitle">
				<text>{{text}}</text>
			</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		sign,
		driverSign,
		lineDetail,
		profile,
		setRole
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				text:"温馨提示:以上行情仅供参考\n地址:广东省深圳市罗湖区\n业务咨询电话:19166279218\n",
				isSao:0,
				userinfo:{},
				info:{
					line_name:'',
				},
				car_id:0,
				group_id:0,
				address: '',
				timer: null,
				currentTime: '',
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			// this.getLocation(0)
			// if(uni.getStorageSync('token')){
			// 	if(this.car_id){
			// 		this.lineDetail()
					
			// 	}
			// 	this.profile()
			// }
			
		},
		onLoad(e) {
			// console.log(e)
			// 1. 从 options.scene 中获取编码后的参数
			const encodedScene = e.scene; // 这里得到的是 "car_id%3D20%26group_id%3D3"

			if (encodedScene) {
				this.isSao=1
				// 2. 对参数进行URL解码
				const decodedScene = decodeURIComponent(encodedScene);
				// 解码后： "car_id=20&group_id=3"

				// 3. 将参数字符串解析为对象，方便使用
				const params = {};
				decodedScene.split('&').forEach(item => {
					const [key, value] = item.split('=');
					params[key] = value; // 注意：这里获取的value是字符串，如需数字类型需转换
				});
				this.car_id=params.car_id
				this.group_id=params.group_id
				console.log('车辆ID:', params.car_id); // 输出：20
				console.log('组ID:', params.group_id); // 输出：3
				
			}else{
				this.isSao=0
				this.car_id=0
				this.group_id=1
			}
			if(this.isSao){
				this.lineDetail()
			}
			
			this.updateTime(); // 初始化时间显示
			this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		// beforeDestroy() {
		//   clearInterval(this.timer); // 清除定时器
		// },
		methods: {
			setRole(){
				var data = {
					group_id: 3
				}
				setRole(data).then(res => {
					
				this.profile()
				
				
				})
			},
			lineDetail() {
			
				var data = {
					car_id: this.car_id
				}
				lineDetail(data).then(res => {
					
					this.info = res.data
				
				
				})
			},
			profile() {
			
				var data = {
					
				}
				profile(data).then(res => {
					// uni.navigateTo({
					// 	url:'/pages/index/setRole'
					// })
					uni.setStorageSync('userinfo', res.data)
					this.userinfo=res.data
					if(res.data.group_id){
						
					}else{
						if(this.car_id){
							if(this.group_id==3){
								this.setRole()
							}else{
								uni.navigateTo({
									url:'/pages/index/setRole'
								})
							}
							
							
						}
					}
					
				
				
				})
			},
			locationRequest(lat, lng,type) {
			
			
				var latLng = lat + ',' + lng
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=3U7BZ-EHTC5-DYHIN-IEEUQ-PP7Y3-AGF3L&location=' +
						latLng,
					data: {

					},
					header: {

					},
					success: (res) => {
						if(type){
							uni.showToast({
								title: '位置更新成功',
								icon: 'none',
								mask:true,
								duration:1500,
							});
						}
							
						this.address = res.data.result.address

					}
				});
			},

			getLocation(type) {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.locationRequest(res.latitude, res.longitude,type)
					}
				});
			},
			buttonClick() {
				if(!uni.getStorageSync('token')){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				// if(!this.car_id){
				// 	this.showToast('请扫码签到')
				// 	return
				// }
				var data = {
					is_scan:this.isSao,
					car_id: this.car_id ,
					sign_address: this.address
				}
				var url=sign
				if(this.userinfo.group_id==3){
					url =driverSign
				}
				url(data).then(res => {
					this.showToast('签到成功')
				})
			},
			updateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, '0'); // 补齐为两位数
				const minutes = now.getMinutes().toString().padStart(2, '0'); // 补齐为两位数
				const seconds = now.getSeconds().toString().padStart(2, '0'); // 补齐为两位数
				this.currentTime = `${hours}:${minutes}:${seconds}`;
			},
			


		}
	}
</script>

<style lang="scss">
	
	.time{
		margin-left: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.status{
		margin-top: 20rpx;
		margin-left: 32rpx;
		width: 96rpx;
		height: 36rpx;
		background: rgba(255,255,82,0.3);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFF8B;
	}
	.newView{
		margin-top: 86rpx;
		padding-left: 30rpx;
		width: 750rpx;
		height: 72rpx;
		background: linear-gradient( 90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.02) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.new{
		margin-right: 12rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.newTitle{
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.itemView{
		padding-bottom: 20rpx;
		position: relative;
		margin: 24rpx;
		margin-top: -100rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.itemView2{
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.itemView1{
		height: 160rpx;
		background: linear-gradient( 180deg, #FEEFE0 0%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		border: 2rpx solid #FFFFFF
	}
	.hang{
		margin-left: 24rpx;
		margin-right: 6rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.title{
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.topTitle{
		width: 25%;
		margin-top: 40rpx;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}
	.topTitle1{
		width: 25%;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	.item1{
		height: 100rpx;
	}
	.bottomTitle{
		
		margin: 24rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}
</style>